<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>大雁追溯扫</title>
	<meta name="decorator" content="default"/>
	<script src="${ctxStatic}/js/jquery.SuperSlide.2.1.1.js"></script>
	<script src="${ctxStatic}/js/slideshow.js"></script>
	<style type="text/css">
		*{
		    list-style: none;
		    margin:0;
		    padding: 0;
		    border: 0;
		}
		html {
		    font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
		}
		
		body {
		    font-size: 1.4rem;/*1.4 × 10px = 14px */
		    background: #ffffff;
		    font-family: "Microsoft YaHei";
		}
		a {
		    text-decoration: none;
		}
		p,h1 {
		    margin: 0;
		}
		
		.fl {
		    width: 100px;
		    float: left;
		}
		.fr {
		    width: 100px;
		    float: right;
		}
		.text_fl {
		    text-align: left;
		}
		.text_fr {
		    text-align: right;
		}
		.clearfix:after{
		    content:'.';
		    display:block;
		    height:0;
		    clear:both;
		    visibility: hidden;
		}
		/*index*/
		.wrapper {
		    width: 100%;
		    background: #dbdbdb;
		}
		.top {
		    width: 100%;
		    /*height: 235px;*/
		}
		.ddxs {
		    width: 100%;
		    background: #ffffff;
		    height: 90px;
		    margin: 6px 0;
		}
		.ddxs p {
		    font-size: 1.2rem;
		    color: #6d6d6d;
		    line-height: 30px;
		    text-align: center;
		}
		.qyjj {
		    width: 100%;
		    background: #ffffff;
		    overflow: hidden;
		}
		.title {
		    width: 100%;
		    height: 28px;
		}
		.title img {
		    width: 18px;
		    height: 18px;
		    float: left;
		    margin: 0 2%;
		    margin-top: 10px;
		
		}
		.title p{
		    text-align: center;
		    padding-top: 10px;
		    font-size: 1.4rem;
		    font-weight: bold;
		    letter-spacing: 2px;
		    float: left;
		    color: #D4B673;
		}
		.title_line {
		    width: 65%;
		    float: right;
		    border-bottom: 1px solid #EEE3C9;
		    height: 28px;
		    margin-right: 5%;
		}
		.title_list {
		    width: 90%;
		    margin: 0 auto;
		    margin-top: 10px;
		    /*background: url("../images/bg2.png") no-repeat left bottom;*/
		    /*background-size: 100% 230px;*/
		    /*border-bottom: 1px solid #E3E3E3;*/
		}
		.title_list table {
		    width: 100%;
		}
		.title_list table tr td {
		    padding: 5px 0;
		    vertical-align: top;
		    font-size: 1.4rem;
		}
		.col_6d {
		    color: #6D6D6D;
		}
		.col_04 {
		    color: #040404;
		}
		/*养殖信息*/
		.yzxx {
		    width: 100%;
		    background: #ffffff;
		    overflow: hidden;
		    padding-top: 6px;
		    padding-bottom: 6px;
		    /*border-bottom: 1px solid #E3E3E3;*/
		}
		.yzxx_list {
		    width: 90%;
		    margin: 0 auto;
		    margin-top: 10px;
		    background: url("../images/bg2.png") no-repeat left bottom;
		    background-size: 100% 170px;
		}
		.yzxx_list table {
		    width: 100%;
		}
		.yzxx_list table tr td {
		    padding: 5px 0;
		    vertical-align: top;
		    font-size: 1.4rem;
		}
		/*!*平台介绍*!*/
		/*.ptjs {*/
		    /*width: 100%;*/
		    /*background: #ffffff;*/
		    /*overflow: hidden;*/
		    /*margin-top: 6px;*/
		    /*margin-bottom: 6px;*/
		/*}*/
		/*.ptjs_list {*/
		    /*width: 100%;*/
		/*}*/
		/*加工工艺*/
		/*.jggy{*/
		    /*width: 100%;*/
		    /*background: #ffffff;*/
		    /*overflow: hidden;*/
		    /*margin-top: 6px;*/
		    /*margin-bottom: 6px;*/
		/*}*/
		/*.jggy_list {*/
		    /*width: 90%;*/
		    /*margin: 0 auto;*/
		/*}*/
		/*.jggy_list p {*/
		    /*padding: 8px 0;*/
		    /*text-indent:2em;*/
		/*}*/
		/*图片滚动*/
		.picture {
		    width: 94%;
		    margin: 20px auto 10px;
		    height: 215px;
		    position: relative;
		}
		.slideBox {
		    /*width: 260px;*/
		    overflow: hidden;
		    /*position: relative;*/
		}
		.slideBox .bd {
		    position: relative;
		    height: 100%;
		    z-index: 0;
		}
		.slideBox .prev {
		    position: absolute;
		    left: -15px;
		    top: 50%;
		    margin-top: -19px;
		    display: block;
		    width: 18px;
		    height: 28px;
		    background: url(../images/jt_left.png) no-repeat;
		    background-size: 100% 100%;
		}
		.slideBox .next {
		    position: absolute;
		    right: -15px;
		    top: 50%;
		    margin-top: -19px;
		    display: block;
		    width: 18px;
		    height: 28px;
		    background: url(${ctxStatic}/images/jt_right.png) no-repeat;
		    background-size: 100% 100%;
		}
	</style>
</head>
<body>
	<div class="wrapper" >
	    <!--头部图片-->
	    <div class="top">
	        <img src="${ctxStatic}/images/img1.jpg" alt="" style="width: 100%;"/>
	    </div>
	    <!--头部图片end-->
	    <!--查询追溯码-->
	    <div class="ddxs">
	        <p>您查询的溯源码为</p>
	        <p style="font-weight: bold;color: #101010;letter-spacing: 4px;font-size: 1.4rem;"><span>${traceNo}</span></p>
	        <p>此码已核实为可追溯向海雁，感谢您的查询与购买</p>
	    </div>
	    <!--查询追溯码end-->
	    <!--企业介绍-->
	    <div class="qyjj">
	        <div class="title">
	            <img src="${ctxStatic}/images/dy_img1.png" alt="" />
	            <p>企业介绍</p>
	            <span class="title_line"></span>
	        </div>
	        <div class="title_list">
	            <table cellpadding="0" cellspacing="0">
	                <tr>
	                    <td width="41%" class="text_fl col_04">统一社会信用代码：</td>
	                    <td width="50%" class="text_fr col_6d">${entInfo.cardNo}</td>
	                </tr>
	                <tr>
	                    <td class="text_fl col_04">企业名称：</td>
	                    <td class="text_fr col_6d">${entInfo.entName}</td>
	                </tr>
	                <tr>
	                    <td class="text_fl col_04">法人姓名：</td>
	                    <td class="text_fr col_6d">${entInfo.legalPerson}</td>
	                </tr>
	                <tr>
	                    <td class="text_fl col_04">联系方式：</td>
	                    <td class="text_fr col_6d">${entInfo.telephone}</td>
	                </tr>
	                <tr>
	                    <td class="text_fl col_04">详细地址：</td>
	                    <td class="text_fr col_6d">${entInfo.addressInfo.detail}</td>
	                </tr>
	            </table>
	        </div>
	    </div>
	    <!--企业介绍end-->
	
	    <!--养殖信息-->
	    <div class="yzxx">
	        <div class="title">
	            <img src="${ctxStatic}/images/dy_img2.png" alt="" />
	            <p>养殖信息</p>
	            <span class="title_line"></span>
	        </div>
	        <div class="yzxx_list">
	            <table cellpadding="0" cellspacing="0">
	                <tr>
	                    <td width="40%" class="text_fl col_04">品种：</td>
	                    <td width="50%" class="text_fr col_6d">${sales.farmType}</td>
	                </tr>
	                <tr>
	                    <td class="text_fl col_04">养殖批次：</td>
	                    <td class="text_fr col_6d">${sales.farmBatch}</td>
	                </tr>
	                <tr>
	                    <td class="text_fl col_04">个体编号：</td>
	                    <td class="text_fr col_6d">${traceNo}</td>
	                </tr>
	                <tr>
	                    <td class="text_fl col_04">饲料信息：</td>
	                    <td class="text_fr col_6d">${sales.farmFodder}</td>
	                </tr>
	                <tr>
	                    <td class="text_fl col_04">出栏时间：</td>
	                    <td class="text_fr col_6d"><fmt:formatDate value="${sales.outStockDate}" pattern="yyyy-MM-dd"/></td>
	                </tr>
	                <tr>
	                    <td class="text_fl col_04">养殖场地址：</td>
	                    <td class="text_fr col_6d">${sales.farmAddress}</td>
	                </tr>
	            </table>
	        </div>
	    </div>
	    <!--养殖信息end-->
	    <!--屠宰信息-->
	    <div class="qyjj">
	        <div class="title">
	            <img src="${ctxStatic}/images/dy_img3.png" alt="" />
	            <p>屠宰信息</p>
	            <span class="title_line"></span>
	        </div>
	        <div class="title_list">
	            <table cellpadding="0" cellspacing="0">
	                <tr>
	                    <td width="40%" class="text_fl col_04">屠宰场：</td>
	                    <td width="50%" class="text_fr col_6d">${sales.butcherName}</td>
	                </tr>
	                <tr>
	                    <td class="text_fl col_04">详细地址：</td>
	                    <td class="text_fr col_6d">${sales.butcherAddress}</td>
	                </tr>
	            </table>
	        </div>
	    </div>
	    <!--屠宰信息end-->
	    <!--销售信息-->
	    <div class="qyjj">
	        <div class="title">
	            <img src="${ctxStatic}/images/dy_img4.png" alt="" />
	            <p>销售信息</p>
	            <span class="title_line"></span>
	        </div>
	        <div class="title_list">
	            <table cellpadding="0" cellspacing="0">
	                <tr>
	                    <td width="40%" class="text_fl col_04">销售客户：</td>
	                    <td width="50%" class="text_fr col_6d">${sales.customerName}</td>
	                </tr>
	                <tr>
	                    <td class="text_fl col_04">详细地址：</td>
	                    <td class="text_fr col_6d">${sales.customerAddress}</td>
	                </tr>
	            </table>
	        </div>
	    </div>
	    <!--销售信息end-->
	
	    <!--基地风采-->
	    <div class="qyjj">
	        <div class="title">
	            <img src="${ctxStatic}/images/dy_img5.png" alt="" />
	            <p>基地风采</p>
	            <span class="title_line"></span>
	        </div>
	        <div class="picture">
	            <div id="slideBox1" class="slideBox m-b m-t">
	                <div class="bd">
	                    <ul>
	                        <li style="width: 100%;height: 220px;margin: 0 auto">
	                            <a href="#" target="_blank">
									<c:forEach items="${attachmentList}" var="attachment">
										<img src="${fns:getFileServerPath()}${attachment.filePath}" style="width: 100%;height: 100%;"/>
									</c:forEach>
	                            </a>
	                        </li>
	                    </ul>
	                </div>
	                <!-- 下面是前/后按钮代码，如果不需要删除即可 -->
	                <!--<a class="prev" href="javascript:void(0)"></a>-->
	                <!--<a class="next" href="javascript:void(0)"></a>-->
	            </div>
	        </div>
	    </div>
	    <!--基地风采end-->
	
	</div>
	<script type="text/javascript" >
	    function menuFixed(id){
	        var obj = document.getElementById(id);
	        var _getHeight = obj.offsetTop;
	
	        window.onscroll = function(){
	            changePos(id,_getHeight);
	        }
	    }
	    function changePos(id,height){
	        var obj = document.getElementById(id);
	        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	        if(scrollTop < height){
	            obj.style.position = 'relative';
	        }else{
	            obj.style.position = 'fixed';
	        }
	    }
	    window.onload = function(){
	        menuFixed('nav_keleyi_com');
	    }
	    jQuery(".slideBox").slide({
	        mainCell: ".bd ul",
	        effect: "left",
	        autoPlay: true
	    });
	    jQuery(".slideBox1").slide({
	        mainCell: ".bd ul",
	        effect: "left",
	        autoPlay: true
	    });
	</script>
</body>
</html>